<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="createEle">创建元素</button>
    <button class="createText">创建文本</button>
    <button class="createCom">创建注释</button>
    <button class="createAttr">创建属性</button>
    <button class="createDoc">创建文档碎片</button>
    <ul class="list">
        <li class="first">1</li>
        <li>2</li>
        <li class="mid">3</li>
        <li>4</li>
        <li>5</li>
        <li class="last">6</li>
    </ul>
</body>
<script>

    var createEle = document.getElementsByClassName("createEle")[0];
    var createText = document.getElementsByClassName("createText")[0];
    var createCom = document.getElementsByClassName("createCom")[0];
    var createAttr = document.getElementsByClassName("createAttr")[0];
    var createDoc = document.getElementsByClassName("createDoc")[0];

    var ul = document.getElementsByClassName("list")[0];
    var mid = document.getElementsByClassName("mid")[0];


    // 如何新增节点?  节点新增之后默认存储在内存当中,放到页面中才会显示
    // document.createElement(tagName) 根据传入的标签名 创建一个元素节点
    // document.createTextNode(con)    根据传入的文本内容 创建一个文本节点
    // document.createComment(con)    根据传入的文本内容 创建一个注释节点
    // document.createAttribute(attrName)    根据传入属性名  创建一个属性节点

    createEle.onclick = function () {
        var li = document.createElement("li");
        li.innerHTML = "我是新增的li";
        li.setAttribute("class", "newLi")
        ul.appendChild(li);
    }
    createText.onclick = function () {
        var text = document.createTextNode("hello world");
        // ul.appendChild(text)
        ul.append("hello");
    }
    createCom.onclick = function () {
        var comment = document.createComment("hello world");
        ul.appendChild(comment)
    }
    createAttr.onclick = function () {
        // 属性: 属性名="属性值"
        // var attrTitle = document.createAttribute("data-index"); // 创建属性节点
        // console.log(attrTitle);   
        // attrTitle.nodeValue = "0";  // 设置属性节点的属性值

        // // 属性节点依存于元素节点  放到元素节点内
        // ul.setAttributeNode(attrTitle);  // 将属性节点 放到元素节点上

        // ul.setAttribute("data-index", 0);

    }
    createDoc.onclick = function () {
        debugger;

        // 重复放100次 => 页面重绘100次 => 影响浏览器的性能
        // for (var i = 1; i <= 100; i++) {
        //     var li = document.createElement("li");
        //     li.innerHTML = "我是新增的li-" + i;
        //     li.setAttribute("class", "newLi");
        //     ul.appendChild(li);
        // }

        var frg = document.createDocumentFragment(); //创建文档碎片
        for (var i = 1; i <= 100; i++) {
            var li = document.createElement("li");
            li.innerHTML = "我是新增的li-" + i;
            li.setAttribute("class", "newLi");
            frg.appendChild(li);
        }
        console.log(frg);

        ul.appendChild(frg);


    }

</script>

</html>